<template>
	<div class="page">
		<navbar></navbar>
		<menubar></menubar>
		<div class="content">
			<el-dialog title="修改密码" :visible.sync="showModifyPasswordForm" width="400px" :before-close="handleCloseForm">
				<el-form :model="params" ref="modifyPasswordForm" :rules="rules">
					<el-form-item label="旧密码" prop="old_password" :label-width="labelWidth">
						<el-input v-model="params.old_password" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="新密码" prop="new_password" :label-width="labelWidth">
						<el-input type="password" v-model="params.new_password" auto-complete="off"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="showModifyPassword(false)">取 消</el-button>
					<el-button type="primary" @click="submitModifyForm">确 定</el-button>
				</div>
			</el-dialog>
			<router-view></router-view>
		</div>
	</div>
</template>

<script>
	import Navbar from '../../components/Navbar'
	import Menubar from '../../components/Menu'
	import { mapActions, mapState } from 'vuex'
	import api from '../../apis';

	export default {
		name: "backend",
		data () {
			return {
				labelWidth: '70px',
				params: {
					old_password: '',
					new_password: ''
				},
				rules: {
					old_password: [
						{ required: true, message: '请输入旧密码', trigger: 'blur' },
						{ min: 6, max: 25, message: '长度在 6 到 25 个字符之间', trigger: 'blur' }
					],
					new_password: [
						{ required: true, message: '请输入工号', trigger: 'blur' },
						{ min: 6, max: 25, message: '长度在 6 到 25 个字符之间', trigger: 'blur' }
					]
				}
			}
		},
		components: {
			navbar: Navbar,
			menubar: Menubar
		},
		computed: {
			...mapState ({
				showModifyPasswordForm: state => state.account.showModifyPasswordForm
			}),
		},
		methods: {
			...mapActions([
				'showModifyPassword'
			]),
			submitModifyForm () {
				api.account.modifyPassword(this.params).then(response => {
					this.showModifyPassword(false);
					this.$message.success('修改成功');
					this.params.old_password = '';
					this.params.new_password = '';
				}).catch(errors => {
					this.$message.error(errors.response.data.error);
				});
			},
			handleCloseForm (done) {
				this.showModifyPassword(false);
			}
		}
	}
</script>

<style lang="scss">
	.page .content {
		margin-left: 200px;
		padding: 70px 20px 20px;
	}
</style>
